<template>
  <div class="trader">
    <!-- <trader-top-bar></trader-top-bar> -->
    <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>
    <div class="tabs" v-if="channel">
      <div class="tabs-wrap">
        <trader-top-bar ref="tabs" :list="channel" :active="page.channel_id" @choose="changeTab"></trader-top-bar>
      </div>
    </div>
    <div class="con">
      <div class="slide">
        <ul class="swiper-wrapper">
          <li
            class="trader-item swiper-slide"
            v-for="item in traderList"
            :key="item.cat_id"
            :data-id="item.shop_id"
            @click="goToCat(item)"
          >
            <div class="trader-item-top">
              <img :src="item.cover" :title="item.en_name">
              <p>{{item.name}}</p>
              <p class="trader-en-name">{{item.en_name}}</p>
              <i></i>
            </div>
            <div class="trader-item-bottom">
              <div class="trader-button">
                <button type="button" class="btn btn-primary"></button>
                <span>立即下单</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <bottom-nav-bar></bottom-nav-bar>
  </div>
</template>

<script>
import TraderTopBar from "~/components/TraderTopBar.vue";
import BottomNavBar from "~/components/BottomNavBar.vue";
import UILoading from "~/components/loading";
import Swiper from "swiper";

export default {
  data() {
    return {
      swipers: "",
      channel: [],
      traderList: [],
      page: {
        channel_id: 0
      },
      idx: 0,
      initLoading: true
    };
  },
  components: {
    TraderTopBar,
    BottomNavBar,
    [UILoading.name]: UILoading
  },
  mounted() {
    (async () => {
      await this.getPage();
    })();
    let that = this;
    this.$nextTick(() => {
      const that = this;
      setTimeout(() => {
        this.swipers = new Swiper(".con>.slide", {
          slidesPerView: "auto",
          centeredSlides: !0,
          watchSlidesProgress: !0,
          pagination: ".swiper-pagination",
          paginationClickable: !0,
          initialSlide: this.idx,
          on: {
            slideChange: function(a) {
              that.page.channel_id = this.activeIndex;
            },
            progress: function(a) {
              var a = this;
              var b, c, d, scale, es;
              for (b = 0; b < this.slides.length; b++)
                (c = a.slides[b]),
                  (d = c.progress),
                  (scale = 1 - Math.min(Math.abs(0.2 * d), 1)),
                  (es = c.style),
                  (es.opacity = 1 - Math.min(Math.abs(d / 2), 1)),
                  (es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform =
                    "translate3d(0px,0," + -Math.abs(150 * d) + "px)");
            },
            setTransition: function(a, b) {
              var a = this,
                es;
              for (var c = 0; c < a.slides.length; c++)
                (es = a.slides[c].style),
                  (es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration =
                    b + "ms");
            }
          }
        });
      }, 1000);
    });
  },
  methods: {
    async getPage() {
      let { data: rs } = await this.$axios.post("?ct=api&ac=goods_category");
      if (rs.code == 0) {
        let data = rs.data.list;
        data.forEach((item, i) => {
          this.channel.push(item.name);
        });
        this.traderList = rs.data.list;
        setTimeout(() => {
          this.initLoading = false;
        }, 1000);
      } else {
      }
    },

    changeTab(idx) {
      this.swipers.slideTo(idx, 1000, false);
    },
    goToCat(item) {
      this.$router.push({
        path: "/good/list",
        query: {
          name: item.name,
          cate_id: item.cat_id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.con .swiper-wrapper {
  display: flex;
  margin-top: 60px;
  transform-style: preserve-3d;
  padding-bottom: 20px;
}
.tabs {
  position: sticky;
  top: 0;
}

.trader-body {
  margin-top: 50px;
  height: 1000px;
}
.trader-item {
  height: 1000px;
  width: 620px;
  box-shadow: 4px 4px 8px #ccc;
  // box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #ccc, 4px -4px 8px #ccc,
  //   -4px 4px 8px #ccc;
  background-color: #fff;
  border-radius: 8px;
  margin: 0 20px;
  &.swiper-slide-prev {
    opacity: 1 !important;
    padding: 30px;
    width: 620px;
    padding-right: 0;
    background: none;
    box-shadow: none;
    overflow: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    .trader-button {
      padding-top: 40px;
      padding-bottom: 30px;
    }
    .trader-item-bottom {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    .trader-item-top {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      position: relative;
    }
  }
  &.swiper-slide-next {
    opacity: 1 !important;
    width: 620px;
    padding: 30px;
    padding-left: 0;
    background: none;
    box-shadow: none;
    overflow: hidden;
    .trader-item-bottom {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    .trader-item-top {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      position: relative;
    }
  }
}
.trader-item-top {
  height: 772px;
  width: 100%;
  // background: #fff;
}
.trader-item-top img {
  position: absolute;
  height: 772px;
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.trader-item-top p {
  position: absolute;
  margin-top: 60px;
  width: 100%;
  font-size: 60px;
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-family: "PingFangSC-Regular";
}
.trader-item-top .trader-en-name {
  margin-top: 146px;
  font-size: 28px;
  line-height: 28px;
  font-family: "PingFangSC-Medium";
}
.trader-item-top i {
  position: absolute;
  margin-left: 289px;
  margin-top: 196px;
  height: 6px;
  width: 42px;
  background-color: #fbcd06;
  border-radius: 2px;
}

.trader-item-bottom {
  background: #fff;
}
.trader-button {
  padding-top: 70px;
}
.trader-button .btn-primary {
  display: block;
  margin-left: 50px;
  width: 520px;
  height: 88px;
  background-color: rgb(32, 134, 249);
  border-radius: 4px;
}
.trader-button span {
  position: absolute;
  width: 620px;
  margin-top: -62px;
  text-align: center;
  font-family: "PingFangSC-Regular";
  font-size: 36px;
  color: #fff;
}
</style>
